<template>
	<div id="goods_buy" class="dialog animated" :class="open? 'fadeIn':'fadeOut'" v-show="show">
		<div class="panel animated" :class="open? 'zoomIn':''">
			<choose v-show="step==1" ref="choose" @ok="chooseOk" @cancel="cancel"></choose>
			<confirm v-show="step==2" ref="confirm" @ok="confirmOk" @cancel="cancel" @back="backChoose"></confirm>
			<pay v-show="step==3" ref="pay" @ok="payOk" @back="backConfirm"></pay>
      		<success v-show="step==4" ref="success" @ok="successOk"></success>
		</div>
	</div>
</template>

<script>
	import choose from "./goods_buy_choose";
	import confirm from "./goods_buy_confirm";
	import pay from "./goods_buy_pay";
	import success from "./goods_buy_success";

	var vm;
	export default {
		components: {
			choose,
			confirm,
			success,
			pay
		},
		data: function() {
			return {
				show: false,
				open: false,
				step: 1,
				student: null
			};
		},
		methods: {
			init: function(student) {
				vm.show = true;
				vm.open = true;
				vm.step = 1;
				vm.student = student;

				vm.$refs.choose.init(student);
			},
			cancel: function() {
				//隐藏弹窗
				vm.open = false;
				setTimeout(function() {
					vm.show = false;
					vm.step = 0;
				}, 500);
			},
			chooseOk: function(countList) {
				vm.step = 2;
				vm.$refs.confirm.init(vm.student, countList);
			},
			confirmOk: function(countList, info) {
				console.log(info);
				//当支付方式为支付宝或者微信时，进入二维码支付页面
				if(info.orderPayState == 1) {
					vm.step = 3;
					vm.$refs.pay.init(vm.student, countList, info);
				} else {
					//反之进入报名成功页面
					vm.step = 4;
					vm.$refs.success.init(vm.student, countList, info);
					vm.$emit("callback");
				}
			},
			payOk: function(countList, info) {
				vm.step = 4;
				vm.$refs.success.init(vm.student, countList, info);
				vm.$emit("callback");
			},
			backChoose: function() {
				vm.step = 1;
			},
			backConfirm: function() {
				vm.step = 2;
			},
			successOk: function() {
				vm.cancel();
			}
		},
		mounted : function() {
		},
		created: function() {
			vm = this;
		}
	};
</script>
<style lang="scss">
	#goods_buy {
		.el-input__inner {
			border-radius: 0.1rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
	}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
	.panel {
		margin-top: 0.6rem;
		width: 10rem;
	}
</style>